<template>
    <div>
        <div
            style="-webkit-font-smoothing: antialiased;text-transform: capitalize;overflow-x: hidden;"
        >
            <el-row type="flex" :gutter="24" class="p-6 bg-gray-100 text-gray-700">
                <el-col :span="14">
                    <div class="p-4 bg-white rounded-md">
                        <el-row type="flex" justify="space-between" align="middle">
                            <p class="text-sm text-gray-500">Profile</p>
                            <el-dropdown placement="bottom-end">
                                <span class="el-dropdown-link">
                                    <i class="el-icon-s-tools text-lg"></i>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>Action</el-dropdown-item>
                                        <el-dropdown-item>Edit</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-row>
                        <div class="mt-4 h-70 overflow-y-auto">
                            <el-descriptions title="Info" direction="vertical" :column="4" border>
                                <el-descriptions-item label="Name">Mike Andrew</el-descriptions-item>
                                <el-descriptions-item label="Phone">18100000000</el-descriptions-item>
                                <el-descriptions-item label="Post" :span="2">Ceo</el-descriptions-item>
                                <el-descriptions-item label="Tips">
                                    <el-tag size="small">School</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="Address">Harvard University</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="flex flex-col items-center pt-12 px-4 h-full bg-white rounded-md">
                        <el-avatar
                            :size="90"
                            src="https://demos.creative-tim.com/vue-black-dashboard-pro/img/emilyz.jpg"
                        ></el-avatar>
                        <p class="mt-4 font-bold text-sm text-gray-700">Mike Andrew</p>
                        <p class="mt-4 text-gray-700 text-xl">Ceo/Co-Founder</p>
                        <p
                            class="mt-4 text-sm text-gray-500"
                        >Do not be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...</p>
                        <el-row type="flex" class="mt-6">
                            <i class="px-2 el-icon-lollipop text-gray-300 text-2xl cursor-pointer"></i>
                            <i
                                class="px-2 el-icon-ice-cream-square text-gray-300 text-2xl cursor-pointer"
                            ></i>
                            <i
                                class="px-2 el-icon-ice-cream-round text-gray-300 text-2xl cursor-pointer"
                            ></i>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script >
export default {
    data() {
        return {
            "tableData": [{
                "date": "2016-05-02",
                "name": "王小虎",
                "address": "上海市普陀区金沙江路 1518 弄"
            }, {
                "date": "2016-05-04",
                "name": "王小虎",
                "address": "上海市普陀区金沙江路 1517 弄"
            }, {
                "date": "2016-05-01",
                "name": "王小虎",
                "address": "上海市普陀区金沙江路 1519 弄"
            }, {
                "date": "2016-05-03",
                "name": "王小虎",
                "address": "上海市普陀区金沙江路 1516 弄"
            }]
        }
    },
    methods: {}
}
</script>
<style scoped></style>
<route lang="yaml">
    meta:
      level: 3
      name: 'Profile'
      layout: default
  </route>